<template>
	<!-- 用户端-我的-我的订单-订单详情-待使用订单页面 -->
	<view>
		<carHeader :title="'待使用订单'"></carHeader>
		
		<!-- 核销码区域 -->
		<view class="top-top">
			<view>
				核销码：{{verificationCode.code}}
			</view>
			<image style="width: 160rpx; margin-top: 50rpx;" mode="widthFix" :src="verificationCode.url"></image>
			
		</view>
		
		<!-- 顶部订单信息 -->
		<view class="top" style="margin-top: 30rpx;">
			<!-- 第一个卡片上方内容 -->
			<view class="top-title">
				<view style="font-size: 36rpx;color: #242424;">订单信息</view>
				<view style="color:#FF5520 ;font-size: 28rpx;">待使用</view>
			</view>
			<!-- 分割线 -->
			<view class="split-bold"></view>
			<!-- 订单信息 -->
			<view>
				<view class="top-context">订单号：{{orderMessage.orderId}}</view>
				<view class="top-context">服务项目：{{orderMessage.program}}</view>
				<view style="display: flex;">
					<view class="top-context">服务门店：{{orderMessage.shop}}</view>
					<image style="width: 30rpx; margin-left: 30rpx;" src="../../static/车联网服务-01专业洗车1slices/plane@2x.png" mode="widthFix"></image>
				</view>
				<view class="top-context">下单时间：{{orderMessage.orderTime}}</view>
				<view class="top-context">预约时间：{{orderMessage.appointmentTime}}</view>
				<view class="top-context">车辆：{{orderMessage.car}}</view>
				<view class="top-context">备注：{{orderMessage.remarks}}</view>
			</view>
			
		</view>
		
		<!-- 中间订单详情 -->
		<view class="body">
			<!-- 第二个卡片上方内容 -->
			<view class="top-title">
				<view style="font-size: 36rpx;color: #242424;">订单详情</view>
			</view>
			<!-- 分割线 -->
			<view class="split-bold"></view>
			<!-- 订单详情 -->
			<view>
				<!-- 车辆精洗 -->
				<view class="top-title">
					<view>车辆精洗</view><view>￥{{orderDetails.vehicleFineWashing}}</view>
				</view>
				<!-- 车辆附加费用 -->
				<view class="top-title">
					<view>车辆附加费用</view>
					<view v-if="orderDetails.additionalCost != 0">￥{{orderDetails.additionalCost}}</view>
					<view v-else>0</view>
				</view>
				<!-- 分割线 -->
				<view class="split"></view>
				<!-- 原价 -->
				<view class="top-title">
					<view>原价</view><view>￥{{orderDetails.originalPrice}}</view>
				</view>
				<!-- 店家优惠 -->
				<view class="top-title">
					<view>店家优惠</view><view style="color:#FF4000 ;">-￥{{orderDetails.storeDiscount}}</view>
				</view>
				<!-- 分割线 -->
				<view class="split"></view>
				<!-- 优惠券 -->
				<view class="top-title">
					<view>优惠券</view><view style="color:#FF4000 ;">-￥{{orderDetails.coupon}}</view>
				</view>
				<!-- 分割线 -->
				<view class="split-bold"></view>
				<!-- 支付金额 -->
				<view class="top-title" style="margin-top: 30rpx;">
					<view style="font-size: 30rpx;">支付金额</view><view style="color: #4ED278; font-size: 30rpx;">￥{{orderDetails.amount}}</view>
				</view>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="bottom">
			<view class="bottom-left">
				<image style="width: 55rpx;" src="../../static/车联网服务-01专业洗车1slices/客服@2x.png" mode="widthFix"></image>
				<view>联系客服</view>
			</view>
			<view class="bottom-right">
				<button style="background: linear-gradient(to right, #cecece,#BFBFBF); border:none;">申请退款</button>
				</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderMessage:{//订单信息对象
					orderId:121212112487878,//订单号
					program:'车辆保养',//服务项目
					shop:'打包车辆维修店',//服务门店
					orderTime:'2023-03-08 17:40',//下单时间
					appointmentTime:'2023-03-08 17:40',//预约时间
					car:'奔驰FWE4/豫A98FHJ',//车辆
					remarks:'',//备注
				},
				orderDetails:{//订单详情对象
					vehicleFineWashing:39.90,//车辆精洗
					additionalCost:20,//车辆附加费用
					originalPrice:59.90,//原价
					storeDiscount:20,//店家优惠
					coupon:10,//优惠券
					amount:29.9//支付金额
				},
				verificationCode:{//核销码对象
					code:'WE343235V',//核销码
					url:'../../static/车联网服务-00首页_slices/首页@3x.png'//二维码
				}
				
			}
		}
	}
</script>

<style lang="scss">
	//分割线
	.split-bold{
		margin: 20rpx 0;
		border: 4rpx solid #F7F7F7;
	}
	.split{
		margin: 20rpx 0;
		border: 2rpx solid #F7F7F7;
	}
	// 核销码区域
	.top-top{
		text-align: center;
		background-color: palevioletred;
		view{
			font-size: 38rpx;
		}
	}
	
	// 订单信息卡片
	.top,.body,.top-top{
		background-color: white;
		color: #414141;
		width: 84%;
		margin: 0 auto;
		padding: 35rpx;
		position: relative;
		top:-230rpx;
		border-radius: 20rpx;
		
	}
	
	.top-title{
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		display: flex;
		justify-content: space-between;
	}
	// 订单信息展示
	.top-context{
		color: #393939;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	
	// 订单详情卡片
	.body{
		margin-top: 30rpx;
	}
	
	// 底部
	.bottom{
		position: fixed;
		justify-content: space-between;
		bottom: 0rpx;
		width: 100%;
		display: flex;
		background-color: white;
		padding: 40rpx 30rpx;
	}
	.bottom-left,.bottom-right{
		margin: auto 0;
		display: flex;
		// background-color: palegreen
	}
	.bottom-left view{
		margin-left: 15rpx;
		line-height: 60rpx; 
		color: #232323;
	}
	.bottom-right{
		margin-right: 25rpx;
		justify-content: space-between;
		// background-color: palegoldenrod;
		button{
			padding: 0 60rpx;
			border-radius: 50rpx;
			margin-right: 15rpx;
			width: 240rpx;
			font-size: 26rpx;
			color: #FBFBFB;
		}
	}

</style>
